<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用 background-attachment 实现滚动阴影</title>
    <style>
      * {
        margin: 0;
        box-sizing: border-box;
        padding: 0;
      }
      ul,
      li {
        list-style: none;
      }
      .container {
        display: flex;

        width: 500px;
      }
      .left-area {
        flex: 0 0 200px;
      }
      .right-area {
        display: flex;
        overflow-x: auto;

        background: linear-gradient(to right, #fff, transparent 100%),
          linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent 100%);
        background-repeat: no-repeat;
        background-attachment: local, scroll;
        background-size: 100px 100%, 10px 100%;

        flex: 1;
      }
      .column {
        border: 1px solid #ccc;

        text-align: center;
      }
      li {
        border-bottom: 1px solid #ccc;
        min-width: 200px;

        white-space: nowrap;
      }

      li:last-child {
        border-bottom: none;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="left-area">
        <div class="column">
          <div class="column-header">姓名</div>
          <ul>
            <li>小王</li>
            <li>小赵</li>
            <li>小白</li>
            <li>小胡</li>
            <li>小李</li>
          </ul>
        </div>
      </div>
      <div class="right-area">
        <div class="column">
          <div class="column-header">性别</div>
          <ul>
            <li>男</li>
            <li>男</li>
            <li>女</li>
            <li>男</li>
            <li>女</li>
          </ul>
        </div>
        <div class="column">
          <div class="column-header">入学时间</div>
          <ul>
            <li>2025年9月5日17:39:32</li>
            <li>2025年9月5日17:39:38</li>
            <li>2025年9月5日17:39:40</li>
            <li>2025年9月5日17:39:42</li>
            <li>2025年9月5日17:39:44</li>
          </ul>
        </div>
        <div class="column">
          <div class="column-header">自我介绍</div>
          <ul>
            <li>特别可爱，宇宙超级无敌</li>
            <li>特别帅气，宇宙超级无敌</li>
            <li>特别酷，宇宙超级无敌</li>
            <li>特别牛，宇宙超级无敌</li>
            <li>特别厉害，宇宙超级无敌</li>
          </ul>
        </div>
      </div>
    </div>
  </body>
</html>
